import React from 'react';
import axios from 'axios'
import {Link} from 'react-router-dom'
import Styles from '../index.module.scss';
import Img01 from '../../../assets/images/nav-1.png'
import Img02 from '../../../assets/images/nav-2.png'
import Img03 from '../../../assets/images/nav-3.png'
import Img04 from '../../../assets/images/nav-4.png'
class Column extends React.Component {
  state = { 
    ItemData:[
      {id:1,imgSrc:Img01,text:'整租'},
      {id:2,imgSrc:Img02,text:'合租'},
      {id:3,imgSrc:Img03,text:'地图找房'},
      {id:4,imgSrc:Img04,text:'去出租'}
    ],
    RentData:[],
    NewsData:[]
   }
   componentDidMount(){
    this.getRentData()
    this.getNewsData()
   }
      //  获取租小组数据
   getRentData = () =>{
    axios.get('http://157.122.54.189:9060/home/groups').then(res =>{
    console.log(res.data.body);
    if(res.data.status === 200){
      this.setState({
        RentData:res.data.body
      })
    }
  })
  }
  // 获取新闻数据
  getNewsData = () =>{
    axios.get('http://157.122.54.189:9060/home/news').then(res =>{
      console.log(res.data.body);
      this.setState({
        NewsData:res.data.body
      })
    })
  }
  render() { 
    const {ItemData,RentData,NewsData} = this.state
    return ( 
      <div>
        {/* 租房栏目 */}
        <div className={Styles.column}>
         {ItemData.map((item) =>
          <div className={Styles.item} key={item.id}>
          <img className={Styles.img} src={item.imgSrc} alt=""/>
          <div className={Styles.text}>{item.text}</div>
          </div>
         )}
        </div>
          {/* 租小组 */}
          <div className={Styles.rent_area}>
            <div className={Styles.rent_title}>
              <h3>租小组</h3>
              <Link to='#' className={Styles.link} href="#"><span>更多</span></Link>
            </div>
            <div className={Styles.rent_list}>
              {RentData.map((item)=>
              <div className={Styles.rent_item} key={item.id}>
              <div className={Styles.rent_item_child}>
                <h4>{item.title}</h4>
                <span>{item.desc}</span>
              </div>
              <img src={`http://157.122.54.189:9060${item.imgSrc}`} alt=""/>
            </div>
          
              )}
              </div>
          </div>
        {/* 最新资讯 */}
        <div className={Styles.news}>
          <div className={Styles.news_title}>
          <h3>最新资讯</h3>
          </div>
          <div className={Styles.news_list}>
            {NewsData.map(item =>
              <div className={Styles.news_item} key={item.id}>
              <img src={`http://157.122.54.189:9060${item.imgSrc}`} alt=""/>
              <div className={Styles.news_item_content}>
              <h4>{item.title}</h4>
                <div className={Styles.news_source}>
                  <span>{item.from}</span>
                  <span>{item.date}</span>
                </div>
              </div>
            </div>
              )}
            </div>
        </div>
      </div>
     );
  }
}
 
export default Column;